<template>
  <div>
    <h1>Post List</h1>
    <ul>
      <li v-for="post in posts" :key="post.id"> {{post.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import  { mapActions, mapState } from 'vuex'
export default {
  name: 'PostPage',
  metaInfo: {
    title: 'Posts'
  },
  data () {
    return {
      // posts: []
    }
  },
  computed: {
    ...mapState(['posts'])
  },
  // 服务端渲染
  // 只支持beforeCreate 和created
  // 不会等待beforeCreate 和creatd 中的异步操作
  // 不支持响应式数据
  // 所以这种做法在服务端渲染中是不会工作的！！！
  // Vue SSR特殊为服务端渲染提供的特殊的一个生命周期钩子函数
  serverPrefetch () {
    // 发起actios, 返回Promise
    return this.getPosts()
  },
  methods: {
    ...mapActions(['getPosts'])
  }
}
</script>

<style>

</style>